<template>
	<div class="ratings" ref="ratings">
		<div class="ratings-content">
			<div class="overview">
				<div class="overview-left border-right">
					<h1 class="score">{{seller.score}}</h1>
					<div class="title">综合评分</div>
					<div class="rank">高于周边商家{{seller.rankRate}}%</div>
				</div>
				<div class="overview-right">
					<div class="score-wrapper">
						<span class="title">服务态度</span>
						<star :size="36" :score="seller.serviceScore"></star>
						 <span class="score">{{seller.serviceScore}}</span>
					</div>
					<div class="score-wrapper">
						<span class="title">商品评分</span>
						<star :size="36" :score="seller.foodScore"></star>
						 <span class="score">{{seller.foodScore}}</span>
					</div>
					<div class="delivery-wrapper">
						<span class="title">送达时间：</span>
						<span class="delivery">{{seller.deliveryTime}}分钟</span>
					</div>
				</div>
			</div>
			<split></split>
			<ratingselect :selectType="selectType" 
					      :onlyContent="onlyContent" 
					      :desc="desc"
					      :ratings="ratings"
						  @select="selectRating"
					      @toggle="toggleContent"
			></ratingselect>
			<div class="rating-wrapper">
				<ul>
					<li v-for="(rating,index) in ratings" 
						:key="index"
						class="rating-item border-bottom"
						 v-show="needShow(rating.rateType, rating.text)" 
					>
						<div class="avatar">
							<img :src="rating.avatar" width="28" height="28">
						</div>
						<div class="content">
							<h1 class="name">{{rating.userName}}</h1>
							<div class="star-wrapper">
								<star :size="24" :score="rating.score"></star>
								<span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
							</div>
							<p class="text">{{rating.text}}</p>
							<div class="recommend"
								 v-show="rating.recommend && rating.recommend.length"
							>
								<span class="icon-thumb_up"></span>
								<span class="item" v-for="item in rating.recommend">{{item}}</span>
							</div>
							<div class="time">
				                {{rating.rateTime | formatDate}}
				            </div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import BScroll from 'better-scroll'
	import {formatDate} from 'common/js/date'
	import star from 'components/star/star'
	import split from 'components/split/split'
	import ratingselect from 'components/ratingselect/ratingselect'

	const POSITIVE = 0;
	const NEGATIVE = 1;
	const ALL = 2;

	export default {
		props: {
			seller: Object,
		},
		data() {
			return {
				ratings: [],
				showFlag: false,
				selectType: ALL,
				onlyContent: true,
				desc: {
					all: '全部',
					positive: '推荐',
					negative: '吐槽'
				},
			}
		},
		methods: {
			getRatings() {
		      axios.get('/api/ratings.json')
		      .then(this.getRatingsSucc)
		    },
		    getRatingsSucc(res) {
		      res=res.data
		      if (res.ret && res) {
		        const data = res
		        this.ratings=data.ratings
		        this.$nextTick(() => {
		        	this.scroll = new BScroll(this.$refs.ratings,{click:true})	
		        })        
		      }
		    },
		    needShow(type,text) {
				if(this.onlyContent && !text){
					return false;
				}
				if(this.selectType === ALL) {
					return true
				}
				else{
					return type === this.selectType
				}
			},
		    selectRating(type) {
				this.selectType = type;
				this.$nextTick (() => {
					this.scroll.refresh();
				})
			},
			toggleContent() {
				this.onlyContent = !this.onlyContent;
				this.$nextTick(()=> {
					this.scroll.refresh();
				})
			}
		},
		mounted() {
			this.getRatings();
		},
		filters: {
			formatDate(time) {
				let date= new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		components: {
			star,
			split,
			ratingselect
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~common/stylus/varibles.styl'
	@import '~common/stylus/mixin.styl'

	.ratings
		position absolute
		top 174px
		bottom 0
		left 0
		width 100%
		overflow hidden
		.overview
			display flex
			padding 18px 0
			.overview-left
				flex 0 0 28%
				width 28%
				padding 6px 0
				text-align center
				border-right(rgba(7,17,27,0.1))
				@media only screen and (max-width: 320px)
					flex 0 0 23%
					width 23%
				.score
					margin-bottom 6px
					line-height 28px
					font-size 24px
					color rgb(255,153,0)
				.title
					margin-bottom 8px
					line-height 12px
					font-size 12px
					color $themeColor
				.rank
					line-height 10px
					font-size 10px
					color $bgColor
			.overview-right
				flex 1
				padding 6px 0 6px 24px
				@media only screen and (max-width: 320px)
					padding-left 10px
				.score-wrapper
					margin-bottom 8px
					font-size 0px
					.title
						display inline-block
						line-height 18px
						font-size 12px
						color $themeColor
						vertival-align top
					.star
						display inline-block
						vertival-align top
						margin 0 12px
					.score
						display inline-block
						line-height 18px
						font-size 12px
						color rgb(255,153,0)
				.delivery-wrapper
					font-size 0
					.title
						line-height 18px
						font-size 12px
						color $themeColor
					.delivery
						line-height 18px
						font-size 12px
						color $bgColor
						margin-left 12px	
		.rating-wrapper
			padding 0 18px
			.rating-item
				display flex
				padding 18px 0	
				border-bottom(rgba(7,17,27,0.1))
				&:last-child
					border-none()	
				.avatar
					flex 0 0 28px
					width 28px
					margin-right 12px
					img
						border-radius 50%
				.content
					flex 1
					position relative
					.name
						margin-bottom 4px
						line-height 10px
						font-size 10px
						color $themeColor
					.star-wrapper
						margin-bottom 6px
						font-size 0
						.star
							margin-right 6px
							display inline-block
							font-size 10px
						.delivery
							display inline-block
							font-size 10px
							color $bgColor
					.text
						margin-bottom 8px
						line-height 18px
						font-size 12px
						color $themeColor	
					.recommend
						line-height 16px
						font-size 0
						.icon-thumb_up,.item
							display inline-block
							margin 0 8px 4px 0
							font-size 9px
						.icon-thumb_up 
							color rgb(0,160,220)
						.item
							padding 0 6px
							color $bgColor
							border 1px solid rgba(7,17,27,0.1)
							border-radius 1px
							background-color #fff
					.time
						position absolute
						top 0
						right 0
						font-size 10px
						line-height 10px
						color $bgColor
						
							
</style>